<template>
	<view v-if="associationUser.length>0">
		<scroll-view scroll-y="true" style="height: 300px;" @scrolltolower="scrolltolower">
			<view class="xqin" v-for="(item, i) in associationUser" :key="i">
				<view class="tr" @click="toStuAndTea(item.type, item.user_id)">
					<image class="ima" :src="item.avatar_url" style="width: 120rpx;height: 120rpx;border-radius: 50%;"></image>
					<view class="mz" v-text="item.username">肖石榴</view>
				</view>
				<view class="zy" v-if="item.remark">{{item.remark}}</view>
				<view class="zy" v-else>无</view>
			</view>
		</scroll-view>
	</view>
	<view v-else>空空如也</view>
</template>

<script>
	export default {
		data() {
			return {
				associationUser: [], //校友会成员
				associationId: '', //校友会id
				user_id: '', //用户id
				page: 0, //页数
				flag: 'true', //判断是否到底
				size: 10, //每次分页查询的数据量
			}
		},
		//获取上一页面传的校友会id查询所有成员
		onLoad(option) {
			this.associationId = option.id;
			this.query(this.associationId)
		},
		methods: {
			query(id) {
				var that = this;
				uni.request({
						url: getApp().globalData.URL + 'associationUserInfo/associationUser',
						data: {
							id: id,
							page: that.page,
							size: that.size,
						},
						header: {
							'content-type': 'application/json;charset=UTF-8' // 默认值
						},
						method: 'GET'
					})
					.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
						var [error, res] = data;
						if (res.data.length == 0) {
							that.flag = 'false';
							that.page = 0;
						}
						console.log(res.data);
						that.associationUser = res.data;
						//that.associationUser=that.associationUser.concat(Array.from(res.data)); //拼接数组
					})
			},
			/* </scroll-view>的触底函数*/
			scrolltolower: function() {
				console.log("我是最底部了");
				if (this.flag == 'false') {
					this.page = 0;
					uni.showToast({
						title: '到底啦~',
						icon: 'none'
					});
				}
			},
			//判断属于教师还是学生
			toStuAndTea(typeId, userId) {
				this.user_id = userId;
				if (parseInt(typeId) == 2) {
					uni.navigateTo({
						url: 'own_inforteacher?id=' + this.user_id
					})
				} else {
					uni.navigateTo({
						url: 'own_inforstudent?id=' + this.user_id
					})
				}
			},
		}
	}
</script>

<style>
	.ima {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.xqin {
		width: 100%;
		height: 150rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
		align-items: center;

		border-bottom: 1rpx solid #C0C0C0;

	}

	.mz {
		font-size: 35rpx;
		margin-top: 50rpx;
		align-items: center;
		margin-left: 20rpx;

	}

	.zy {
		margin-left: 160rpx;
		font-size: 24rpx;
		margin-top: -40rpx;
		color: #999999;
	}

	.tr {
		display: flex;
	}
</style>
